<template>
  <div class="page-configView">
    <a-tabs
      v-model:activeKey="configState.activeKey"
      :destroyInactiveTabPane="false"
      :tabBarGutter="32"
      :tabBarStyle="{ borderBottom: 'none' }"
      @change="handleChange"
    >
      <a-tab-pane key="1" tab="基础配置" force-render> <BasicConfig ref="basicRef" /></a-tab-pane>
      <a-tab-pane key="2" tab="图片设置" force-render> <ImageConfig ref="imageRef" /> </a-tab-pane>
      <a-tab-pane key="3" tab="影片信息接口配置" force-render> <FilmConfig ref="filmRef" /> </a-tab-pane>
      <a-tab-pane key="4" tab="图片域名配置" force-render> <ImageDomainConfig ref="imageDomainRef" /></a-tab-pane>
      <!-- <a-tab-pane key="5" tab="播放线路" force-render><PlayLine /> </a-tab-pane> -->
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import BasicConfig from './components/BasicConfig.vue'
import ImageConfig from './components/ImageConfig.vue'
import FilmConfig from './components/FilmConfig.vue'
import ImageDomainConfig from './components/ImageDomainConfig.vue'
// import PlayLine from './components/playLine.vue'
import { configState } from './state'
import { useRoute } from 'vue-router'
const route = useRoute()
const basicRef = ref()
const imageRef = ref()
const filmRef = ref()
const imageDomainRef = ref()

const handleChange = (key: string) => {
  console.log('key: ', key)
  switch (key) {
    case '1':
      basicRef.value.getBase()
      return
    case '2':
      console.log('imageRef.value: ', imageRef.value)
      imageRef.value.getImageSet()
      return
    case '3':
      filmRef.value.getFilmSet()
      return
    case '4':
      imageDomainRef.value.getImgDomaineSet()
      return
    default:
      return
  }
}
watch(
  () => route.name,
  () => {
    configState.activeKey = '1'
  },
  { deep: true }
)
onMounted(() => {
  basicRef.value.getBase()
})
</script>

<style lang="less" scoped>
.page-configView {
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #0083ff;
    text-shadow: 0 0 0.25px currentcolor;
  }
  :deep(.ant-tabs-content-holder) {
    padding-bottom: 8px;
  }
  :deep(ant-tabs-nav-wrap) {
    width: auto;
    border-bottom: 1px solid #fff;
  }

  :deep(.ant-tabs-nav) {
    width: 410px;
    margin: 0 0 24px 0;
  }

  :deep(ant-tabs-nav-list) {
    border-bottom: 1px solid #f1f1f1;
  }
}
</style>
